@media screen and (min-width: 0px) and (max-width: 680px) {
    #app {
        .scroll-snap-container {
            scroll-snap-type:none;
            scroll-behavior: auto;
        }
        .scroll-snap-container.fullscreen{
            display: block;
        }
        .scroll-snap-container.fullscreen > .item{
            min-height: auto;
            height: auto;
            width: 100%;
            overflow: hidden;
            padding: 0;
        }
        .about-header {
            width: 100%;
            .title {
               width: 180%;
            }
        }
        .header{
            .logo{
                .logo-img{
                    height: 80px;
                }
            }
        }


        .first-box {
            margin-top: 50px;
            .first-context{
                position: relative;
                height: calc(100% - 50px);
            }
            .search-box {
                display: none;
                left: 10%;
                width: calc(80% - 40px);
                padding: 0 20px;

                input {
                    font-size: 18px;
                }
            }

            .slogan {
                margin: 0 auto;
                padding: 0;
                width: 80%;
                font-size: 18px;
                line-height: 10px;
                div {
                    margin: 5px 0;
                }
            }
        }
        .second-box {

            .about-context {
                .about-content {
                    padding: 20px 10px;
                    width: calc(100% - 20px);
                    border-radius:0;
                    height: auto;
                    .content {
                        line-height: 22px;
                        margin-top:0;
                        letter-spacing:0
                   }
                    .content::-webkit-scrollbar {
                        height: 0;
                        width: 0;
                        color: transparent;
                    }
                    .about-content-button {
                        width: calc(100% - 20px);
                        padding: 10px 10px;
                        margin-top: 5px;
                    }
                }
            }
        }
        .three-box {
            .area {
                flex-direction: column;
                .area-left {
                    width: 100%;
                    .area-box {
                        width: calc(100% - 20px);
                        padding: 10px 0;
                        height: 350px;
                        .area-input {
                            input {
                                padding: 10px 0;
                                width: 100%;
                                text-align: center;
                            }
                        }
                        .area-button {
                            margin: 5px 0;
                            width: 100%;
                            padding: 10px 0;
                        }
                    }
                }
                .area-right {
                    height: calc(100% - 143px);
                    width: calc(100% - 20px);
                    grid-column-gap: 5px;
                    grid-template-columns: 1fr 1fr 1fr;
                    padding: 10px;
                    .button-item {
                        height: 60px;
                        margin-top: 5px;
                        .icon {
                            img {
                                width: 35px;
                                height: 45px;
                            }
                        }
                    }
                }

            }
        }
        .four-box {
            .team {
                flex-direction: column;
            }
            .team-context {
                flex-direction: column;
                padding: 0;
                .team-left {
                    padding: 0 10px 20px 10px;
                    width: calc(100% - 20px);
                    .lawyer-item {
                        margin: 0;
                    }

                    .lawyer-item:first-child {
                        margin-right: 10%;
                    }
                }

                .team-right {
                    width: 90%;
                    padding: 5%;

                    .team-right-title {
                        display: none;
                    }

                    .team-right-slogan {
                    }

                    .team-right-content {
                        text-indent: 2rem;
                    }

                    div {
                        margin-bottom: 5px;
                    }

                    .team-button {
                        margin: 5px 0;
                        padding: 10px 0;
                        width: 100%;
                        cursor: pointer;
                    }
                }
            }
        }
        .five-box {

            .book {
                .book-box-content{
                    width: calc(100% - 20px);
                    padding:0 10px;
                    flex-direction: column;
                }
                flex-direction: column;
                .book-left {
                    width: 100%;
                    height: 350px;
                }

                .book-right {
                    .book-button{
                        width: 100%;
                        padding: 10px 0;
                    }
                    width: 100%;
                    padding: 0;
                    height: 300px;
                }

            }
        }
        .six-box {
            .join-us {
                display: block;
                position: relative;

                .join-left {
                    width: 100%;
                    height: 600px;
                    background: rgba(255, 255, 255, 0.6);
                    .join-left-content {
                        width: calc(100% - 20px);
                        padding: 10px 10px;
                        height: 100%;
                        margin: 0;
                        .join-title {
                        }

                        .join-second-title {
                        }

                        .join-main-content {
                            line-height: 30px;
                        }
                    }
                }

                .join-right {
                    float: left;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }
            }

            .join-us-button {
                float: right;
            }
        }
        .seven-box {
            width: 100%;
            height: 100%;
            overflow: hidden;
            .consulting-box {
                 display: block;
                .consulting-input-group {
                    justify-content: space-around;
                    align-items: center;
                    height: 168px;
                    .consulting-input-row{
                        width: 95%;
                        height: 150px;
                        flex-direction: column;
                        .consulting-input-item{
                            width: 100%;
                            height: 41px;
                        }
                        .consulting-input{

                        }
                    }
                    .consulting-button {
                        letter-spacing: 0;
                        padding: 10px 0;
                        width: 100%;
                        height: auto;
                    }
                }

                .consulting-main-box {
                    padding: 0;
                    width: 100%;
                    .consulting-main-box-content{
                        flex-direction: column;
                        height:auto;
                    }

                    .consulting-main-left-box {
                        width: calc(100% - 20px);
                        border-right: none;
                        border-bottom: 1px solid #993C1A;
                        padding: 20px 10px;
                        height: 200px;
                        .consulting-main-left-phone{
                            overflow:hidden; //超出的文本隐藏
                            text-overflow:ellipsis; //溢出用省略号显示
                            white-space:nowrap; //溢出不换行
                        }
                        .consulting-tag{
                            justify-content:space-between;
                            .tag-item:nth-child(even){
                                display: none;
                            }
                            .tag-item{
                                width: 49%;
                                .tag-btn{
                                    padding: 10px 0;
                                }
                            }
                        }
                    }

                    .consulting-main-right-box {
                        width: calc(100% - 20px);
                        align-items:center;
                        padding: 20px 10px;
                        .qrcode {
                            width: 150px;
                            height: 150px;
                        }
                    }
                }
            }
        }
        .eight-box{
            .index-news-box{
                width: calc(100% - 20px);
                padding: 10px 0;
                .index-news-content{
                    flex-direction: column;
                    .index-news-first{
                        width: 100%;
                    }
                    .index-news-other{
                        width: 100%;
                        .news-list-item{
                            flex-direction: column;
                            .item{
                                width: 100%;
                            }
                        }
                    }
                }
            }
            .index-news-button{
                margin: 5px 0;
                width: 100%;
                padding: 10px 0;
            }
        }
        .footer {
            padding-bottom: 10px;

            .footer-content {
                padding: 0 10px;
                flex-direction: column;
                width: calc(100% - 20px);
                border-bottom: 1px solid #FFFFFF;
                height: 224px;
                .logo {
                    width: 100%;
                    padding-right: 0;
                    border-right: none;
                    .address {
                        display: none;
                    }
                }
                .relation {
                    width: 100%;
                    align-items: flex-start;
                    flex-direction: column;
                    padding-left: 0;
                    padding-bottom: 5px;
                    height: auto;
                    .technical{
                        display: block;
                    }
                    div{
                        height: 20px;
                    }
                }

                .remark-content-main {
                    display: none;
                }
            }

            .remark-content {
                display: block;
                width: calc(100% - 20px);
                padding: 5px 10px 0 10px;
            }
        }

        .main {
            .sq_header{
                .sq-header-title{
                    width: calc(100% - 20px);
                    margin-left: 10px;
                }
            }
            .about{
                .content {
                    padding: 10px 0;
                    .content_title{
                        margin: 0;
                    }
                    .content-info{
                        .content_data{
                            margin: 0;
                        }
                    }
                }
                .environment{
                    .env-image-box{
                        width: calc(100% - 20px);
                        padding: 0 10px;
                        display: flex;
                        flex-direction: column;
                        .evn-item{
                            display: block;
                            width: 100%;
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }

}
